<template>
  <el-form-item
    :rules="rule"
    class="xmf-date-picker"
    :label="label"
    :prop="prop"
  >
    <el-date-picker
      :type="type"
      :disabledDate="disabledDateF"
      v-model="date"
      :placeholder="placeholder"
      :style="{ width: $slots.default ? '85%' : '100%' }"
    ></el-date-picker>
    <!-- <slot /> -->
    <span :style="{ width: $slots.default ? '15%' : '0%' }">
      <slot />
    </span>
  </el-form-item>
</template>
<script>
  import { computed, toRefs } from '@vue/runtime-core'
  import {
    greaterThanToday1Hours,
    tryFormatUTC,
    greaterThanYesterday,
  } from '@/utils/timeTools'
  export default {
    name: 'XmFPicker',
    props: {
      modelValue: String,
      label: String,
      quick: Boolean,
      prop: String,
      type: {
        type: String,
        default() {
          return 'date'
        },
      },
      disabledDateT: {
        type: String,
        default() {
          return null
        },
      }, // after 屏蔽之后的, before 屏蔽之前的
      foots: String,
    },
    setup(props, context) {
      let date = computed({
        get() {
          return props.modelValue
        },
        set(val) {
          context.emit('update:modelValue', tryFormatUTC(val))
        },
      })
      let placeholder =
        '请选择' + props.label ? props.label.replace('：', '') : ''

      const disabledDateF = function (time) {
        if (props.disabledDateT === 'before') {
          return greaterThanToday1Hours(time.getTime())
        } else if (props.disabledDateT === 'after') {
          return !greaterThanToday1Hours(time.getTime())
        } else if (props.disabledDateT === 'beforeYesterday') {
          return greaterThanYesterday(time.getTime())
        }
        return false
      }
      const state = {
        rule: [{ required: props.quick, message: '不能为空' }],
      }
      return {
        date,
        placeholder,
        disabledDateF,
        ...toRefs(state),
      }
    },
  }
</script>
<style lang="scss">
  .xmf-date-picker {
    .el-input {
      width: 100%;
    }
    .el-form-item__content {
      display: flex;
    }
  }
</style>
